<template>
  <div class="netease-cloud-music">
    <!-- 轮播图区域-->
    <div class="swipe-container">
      <Swipe class="my-swipe" :autoplay="3000" indicator-color="#fff" indicator-size="6px">
        <SwipeItem class="swipe-item">
          <img 
            src="https://ts1.tc.mm.bing.net/th/id/R-C.091e35edac0f1ac21b2c0807d6719533?rik=DCTqC8FfOkysvQ&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20210430ac%2f40%2fw480h360%2f20210430%2f6c11-kpptear4381799.jpg&ehk=NN1LqsIr8hbU3HFUPyjUmDEYN7JVRxFfjNQo7WT8%2fLo%3d&risl=&pid=ImgRaw&r=0" 
            alt="金志文专辑" 
            class="slide-image" 
          />
          <div class="swipe-overlay"></div>
          <div class="swipe-info">
            <h3 class="swipe-title">金志文</h3>
            <p class="swipe-desc">再打开便是青春之门</p>
          </div>
        </SwipeItem>
        <SwipeItem class="swipe-item">
          <img 
            src="https://www.yuehaishibei.com/wp-content/uploads/2022/05/1653923224-e0eef9f78077a2f.jpg" 
            alt="伍佰&China Blue" 
            class="slide-image" 
          />
          <div class="swipe-overlay"></div>
          <div class="swipe-info">
            <h3 class="swipe-title">伍佰&China Blue</h3>
            <p class="swipe-desc">单程车票</p>
          </div>
        </SwipeItem>
      </Swipe>
    </div>

    <!-- 功能入口 -->
    <div class="function-list">
      <div class="function-item" 
        v-for="(item, index) in functionItems" 
        :key="index"
      >
        <div class="function-icon-wrap">
          <img :src="item.icon" alt="icon" class="function-icon" />
        </div>
        <p class="function-text">{{ item.text }}</p>
      </div>
    </div>

    <!-- 发现好歌单 - 新增卡片阴影和标题样式 -->
    <div class="playlist-section">
      <div class="playlist-header">
        <h2 class="playlist-title">
          <span class="title-decoration"></span>
          发现好歌单
        </h2>
        <Button 
          round 
          type="info" 
          size="small"
          class="more-btn"
        >
          查看更多
        </Button>
      </div>
      <div class="playlist-list">
        <div 
          class="playlist-item" 
          v-for="(item, index) in playlistItems" 
          :key="index"
        >
          <div class="playlist-cover-wrap">
            <img 
              :src="item.cover" 
              alt="歌单封面" 
              class="playlist-cover" 
            />
            <div class="playlist-mask">
              <Button 
                class="play-btn" 
                size="icon" 
                icon="play-circle" 
                round
              />
            </div>
          </div>
          <p class="playlist-name">{{ item.name }}</p>
          <p class="playlist-count text-xs">{{ item.playCount }}次播放</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Swipe, SwipeItem, Button, Icon } from 'vant/es';
import 'vant/es/swipe/style';
import 'vant/es/swipe-item/style';
import 'vant/es/button/style';
import 'vant/es/icon/style';

// 功能入口数据
const functionItems = ref([
  { 
    icon: 'https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0', 
    text: '每日推荐' 
  },
  { 
    icon: 'https://ts3.tc.mm.bing.net/th/id/OIP-C.74sYbnMLHdr2cYx-Ci6HvgHaHG?rs=1&pid=ImgDetMain&o=7&rm=3', 
    text: '私人FM' 
  },
  { 
    icon: 'https://img.58tg.com/up/allimg/4k/s/03/2302091JH56044-0-lp.jpg', 
    text: '歌单' 
  },
  { 
    icon: 'https://img.shetu66.com/2023/06/26/1687741753507339.png', 
    text: '排行榜' 
  },
]);

// 歌单数据（新增名称和播放量）
const playlistItems = ref([
  { 
    cover: 'https://img.shetu66.com/2023/06/25/1687678759790680.png', 
    name: '爆动活力DJ | 年轻就该活力四射', 
    playCount: '12.5万'
  },
  { 
    cover: 'https://a.520gexing.com/zb_users/upload/2023/06/202306111686466388522707.jpg', 
    name: '元气100% | 烦恼关闭，快乐一萝筐', 
    playCount: '8.3万'
  },
  { 
    cover: 'https://picsum.photos/100?random=8', 
    name: '复古disco | 回到80年代的舞厅', 
    playCount: '5.7万'
  },
  { 
    cover: 'https://picsum.photos/100?random=9', 
    name: '学习必备 | 专注氛围纯音乐', 
    playCount: '23.1万'
  },
]);
</script>

<style scoped>
.netease-cloud-music {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20px;
}

/* 轮播图优化 */
.swipe-container {
  margin: 12px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.my-swipe {
  height: 180px;
}

.swipe-item {
  position: relative;
  height: 100%;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swipe-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

.swipe-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  color: #fff;
}

.swipe-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.swipe-desc {
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.swipe-btn {
  background-color: #c20c0c !important;
  border-color: #c20c0c !important;
}

/* 功能入口优化 */
.function-list {
  display: flex;
  justify-content: space-around;
  padding: 16px 0;
  /* 可根据需要调整背景等样式，比如让容器更贴合页面 */
  background-color: #fff; 
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.function-icon-wrap {
  width: 60px; 
  height: 60px;
  border-radius: 50%; 
  background-color: #f7f7f7; 
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; 
}

.function-icon {
  width: 100%; 
  height: 100%;
  object-fit: cover;
}

.function-text {
  margin-top: 6px;
  font-size: 12px;
  color: #333;
}

/* 歌单区域优化 */
.playlist-section {
  padding: 0 12px;
  margin-top: 16px;
}

.playlist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.playlist-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
}

.title-decoration {
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #c20c0c;
  border-radius: 2px;
  margin-right: 6px;
}

.more-btn {
  background-color: #f5f5f5 !important;
  color: #666 !important;
  border-color: transparent !important;
  font-size: 12px;
}

.playlist-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.playlist-list::-webkit-scrollbar {
  display: none;
}

.playlist-item {
  flex-shrink: 0;
  width: 120px;
}

.playlist-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.playlist-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-mask {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.playlist-cover-wrap:hover .playlist-mask {
  background-color: rgba(0, 0, 0, 0.2);
}

.play-btn {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.3s;
  background-color: rgba(194, 12, 12, 0.9) !important;
  color: #fff !important;
}

.playlist-cover-wrap:hover .play-btn {
  opacity: 1;
  transform: scale(1);
}

.playlist-name {
  font-size: 13px;
  color: #333;
  line-height: 1.4;
  margin-bottom: 4px;
}

.playlist-count {
  color: #999;
  display: flex;
  align-items: center;
}

.playlist-count::before {
  content: "🎧";
  margin-right: 2px;
}

</style>